<template>
	<view class="container">
		<view class="top_bag text-center">
			<view v-if="userInfo.teamPartnerStatus == 1" class="hhr">
				<view class="hhtText">合伙人</view>
			</view>
			<view v-if="userInfo.teamPartnerStatus != 1" class="hhr">
				<view class="hhtText1"></view>
			</view>

			<view class="indexHaeder">
				<image src="../../static/public/yuan3.png" class="totalimg"></image>
				<image src="../../static/public/xian3.png" class="totalxian"></image>
				<view class="total ">
					<view class="p">我的平台总收入</view>
					<view class="p num"><text class="fuhao">￥</text>{{incomeData.totalMoney ||0}}</view>
				</view>
				<view class="paimin">
					<view v-if="userInfo.empClass == 0 ">内部员工排名</view>
					<view v-if="userInfo.empClass == 1 ">全民经纪人排名</view>
					<view v-if="incomeData.rank < 500">第{{incomeData.rank}}位</view>
					<view v-if="incomeData.rank >= 500">500+</view>
					<view v-if="!incomeData ">第0位</view>
				</view>
			</view>
			<view class="empty"></view>
		</view>
		<!--end top_bag -->
		<view class="tabar" style="margin-top: -80rpx;">
			<view class="card" style="border-radius: 5px">
				<view class="row">
					<view class="col" @click="goToStatus" :data-orderStatus="censusData[0].orderStatus">
						<view class="number">{{censusData[0].count || 0}}</view>
						<view>
							<view class="p">待审批</view>
						</view>
					</view>
					<view class="col" @click="goToStatus" :data-orderStatus="censusData[1].orderStatus">
						<view class="number">{{censusData[1].count || 0}}</view>
						<view>
							<view class="p">已审批</view>
						</view>
					</view>
					<view class="col" @click="goToStatus" :data-orderStatus="censusData[2].orderStatus">
						<view class="number">{{censusData[2].count || 0}}</view>
						<view>
							<view class="p">已放款</view>
						</view>
					</view>
					<view class="col" @click="goToStatus" :data-orderStatus="censusData[3].orderStatus">
						<view class="number">{{censusData[3].count || 0}}</view>
						<view>
							<view class="p">中止</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--end tabar -->
		<view class="college">
			<view class="collegeLeft" v-for=" item in mainColumnData" :key="item.id" :data-id="item.id" style="border-radius: 5px"
				 @click="toArticle">
				<image src="../../static/public/college.png" class="collegeImg" v-if="item.id == 1"></image>
				<image src="../../static/public/housing.png" class="collegeImg" v-if="item.id == 7"></image>
				<text class="collegeText">{{item.columnName}}</text><text class="collgegNum">{{item.number || ""}}</text>
			</view>
		</view>
		<!--end college -->
		
		<!-- start 经纪人规则 -->
		<view class="gz">
			<view>
				<view class="text-title">经纪人规则:</view>
			</view>
			<view class="text-content">
				<view class="text"> 1、每成功完成一笔交易放款，即可获取佣金;</view>
				<view class="text"> 2、成交越多，佣金越多，不设上限；</view>
				<view class="text"> 3、佣金每月结算一次，于每月25日发放；</view>
				<view class="text"> 4、加入合伙人团队，额外分享高额团队奖金；</view>
			</view>
		</view>
		<!-- end 经纪人规则 -->
		
		<!--start 产品列表  -->
		<view v-for="project in projectModeData" :key="project.typeId">
			<view class="three-title">{{project.projectTypeName}}</view>
			<view class="cardw" v-for="(item, index) in project.projectModes" :key="item.id" :data-columnid="item.id" @click="productOn">
				<view class="first">
					<view class="title">
						<image :src="item.productImgUrl" class="cpimg"></image>
						<view class="text-left">{{item.modeName}}</view>
					</view>
					<view class="btn" :data-columnid="item.id"  @click.stop="newOrderBtn">
						<view class="btn-text">我要录单</view>
					</view>
				</view>
				<view class="ms">
					<view class="maoshu">{{item.productBrief}}</view>
				</view>
				<view class="third">
					<view class="text-right" v-if="item.yearRate != 0.00">
						<text style="color:#333333">月费率</text>
						<text class="red">{{item.yearRate}}%</text>
					</view>
					<view class="text">{{item.brokerChargeExplain}}</view>
				</view>
				<view class="fourthBox">
					<view class="fourth">
						<image class="fourthImage" src="../../static/public/jinbi.png"></image>
						<text class="fourthText">{{item.brokerExtract || "暂无说明"}}</text>
					</view>
				</view>
			</view>

		</view>
		<!--end 产品列表  -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { formatDecimal, imgErr} from "@/common/util.js";
	export default {
		data() {
			return {
				incomeData: {
					totalMoney: 500,
					rank: 499
				},
				censusData: [{count:0},{count:0},{count:0},{count:0}],
				mainColumnData: [{
					id: 1,
					columnName: "经纪人",
					number: 10
				}, {
					id: 7,
					columnName: "专项",
					number: 10
				}],
				projectModeData: [{
						projectModes: [{
							brokerChargeExplain: "服务费最低为开户费500元，每月管理费50元",
							brokerChargeShow: 1,
							brokerExtract: "",
							brokerRatio: 100,
							id: 1,
							modeName: "公积金代缴",
							productBrief: "公积金代缴业务，",
							productImgUrl: "http://192.168.0.131:9001/image/e1a795d8-6591-4a13-b220-61fe79e5d1fc.png",
							productType: 4,
							yearRate: "0E-8"
						}],
						projectTypeName: "经纪人服务",
						typeId: "1",
					}
				]
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad:function () {
			let IsLogin =  uni.getStorageSync("token");
			if(IsLogin){
				this.getIncome(),
				this.getProMode(),
				this.getIndexColunm(),
				this.getIndexCensus()
			}
		},
		methods: {
			//图片加载失败
			imageError(dataArrary, index){
				imgErr(dataArrary, index, "productImgUrl")	
			},
			//去各状态页面
			goToStatus(e) {
				let orderStatus = e.target.dataset.orderstatus ||e.currentTarget.dataset.orderstatus;
				uni.navigateTo({
				    url: "/pages/order/orderStatus?id="+orderStatus 
				});
			},
			//获取总收入，排名
			getIncome() {
				this.$api.getIncome().then(res=>{
					this.incomeData = res.data.data
				})
			},
			//获取产品接口
			getProMode() {
				this.$api.getProMode().then(res=>{
					res.data.data.map(item => {
						item.projectModes.map(i => {
						i.yearRate = formatDecimal(i.yearRate, 2)
						return i
						})
						return item
					})
					this.projectModeData = res.data.data;
				})
			},
			//获取栏目
			getIndexColunm() {
				this.$api.getIndexColunm().then(res=>{
					this.mainColumnData = res.data.data
				})
			},
			//各数据订单
			getIndexCensus() {
				this.$api.getIndexCensus().then(res=>{
					this.censusData = res.data.data
				})
			},
			//各产品介绍
			productOn(e) {
				let id = e.target.dataset.columnid ||e.currentTarget.dataset.columnid;
				uni.navigateTo({
				    url: "../common/productDetail?id="+id 
				});
			},
			//录入新单 
			newOrderBtn(e) {
				let id = e.target.dataset.columnid ||e.currentTarget.dataset.columnid;
				uni.navigateTo({
				    url: "../addOrder/addOrder?id="+ id 
				});
			},
			//文章跳转页面
			toArticle (e){
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/template/article/list?id=' + id
				});
			}
		},
		//上拉刷新
		onPullDownRefresh() {
			this.getIncome();
			this.getProMode();
			this.getIndexColunm();
			this.getIndexCensus();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style scoped lang="scss">
	.container {
		width: 100%;
		overflow: hidden;
		background-color: #f8f8f8;
	}

	.top_bag {
		background-color: #52aaf8;
		background-size: cover;
		padding: 5rpx 0;
		display: flex;
		align-items: center;
		flex-flow: column;
		color: #FFFFFF;
	}

	.hhr {
		width: 100%;
		height: 80rpx;
	}

	.hhtText {
		background-color: rgba(255, 255, 255, .2);
		width: 180rpx;
		margin: 0 auto;
		height: 55rpx;
		border-radius: 25px;
		color: #FFFFFF;
		font-size: 13px;
		line-height: 55rpx;
	}

	.hhtText {
		width: 180rpx;
		height: 55rpx;
	}

	.indexHaeder {
		position: relative;
		margin: 0 auto;
	}

	.total {
		position: absolute;
		top: 90rpx;
		width: 100%;
		text-align: center;
		line-height: 45rpx;
	}

	.totalimg {
		width: 380rpx;
		height: 380rpx;
		position: relative;
	}

	.totalxian {
		width: 216rpx;
		height: 12rpx;
		position: absolute;
		top: 220rpx;
		left: 88rpx;
	}

	.total .p {
		font-size: 15px;
	}

	.number {
		text-align: center;
		line-height: 60rpx;
		font-size: 21px;
		font-weight: bold;
		color: #333333;
	}

	.total .num {
		font-size: 30px;
		height: 1.8rem;
		line-height: 1.8rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fuhao {
		font-size: 15px;
		font-weight: Bold;
	}

	.paimin {
		position: absolute;
		top: 250rpx;
		width: 100%;
		text-align: center;
		font-size: 12px;
		line-height: 38rpx;
	}

	.empty {
		width: 100%;
		height: 80rpx;
	}

	.card {
		overflow: hidden;
		margin: 20rpx 30rpx;
		border-radius: 4rpx;
		background-color: #fff;
		box-shadow: -8px 12px 21px 0px 
		  rgba(1, 10, 47, 0.03);
	}

	.row {
		display: flex;
		height: 170rpx;
		text-align: center;
		justify-content: space-around;
		align-items: center;
		font-size: 14px;
		.col{
			width: 24%;
		}
	}

	.number {
		line-height: 60rpx;
		font-size: 21px;
		font-weight: bold;
		color: #333333;
	}

	.college {
		width: 100%;
		padding: 4rpx 30rpx;
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
	}

	.collegeLeft {
		width: 48%;
		height: 96rpx;
		background-color: white;
		box-shadow: 0px 0px 38px 2px 
		  rgba(1, 10, 47, 0.04);
		display: flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: center;
	}

	.collegeImg {
		width: 48rpx;
		height: 48rpx;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.collegeText {
		font-size: 14px;
		color: #333333;
		align-items: center;
		justify-content: center;
	}

	.collgegNum {
		font-size: 14px;
		color: #FF3347;
		margin-left: 5px;
	}

	.gz {
		border: 1px #CCCCCC dashed;
		margin: 20rpx 30rpx;
		border-radius: 5px;
	}

	.text-title {
		padding: 20rpx 0 10rpx 20rpx;
		font-family: PingFang-SC-Medium;
		color: #333333;
		font-size: 14px;
	}

	.text-content {
		font-size: 12px;
		padding: 10rpx 0 20rpx 20rpx;
		color: #999999;
		line-height: 35rpx;
	}

	.cpimg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 5px;
		float: left;
	}

	.three-title {
		margin: 40rpx 30rpx;
		padding-left: 20rpx;
		border-left: 4px #368FFA solid;
		font-weight: Bold;
		color: #333333;
		font-size: 16px;
	}

	.cardw {
		margin: 20rpx 30rpx 20rpx 30rpx;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0px 6px 21px 9px 
		  rgba(1, 10, 47, 0.02)
	}

	.cardw .text-left {
		line-height: 70rpx;
		font-weight: Bold;
		color: #333333;
		font-size: 15px;
		text-align: left;
		float: left;
		margin-left: 20rpx;
	}

	.first .btn {
		font-size: 13px;
		position: absolute;
		right: 20rpx;
	}

	.first .btn-text {
		background-color: #52AAF8;
		color: white;
		border-radius: 50rpx;
		text-align: center;
		line-height: 50rpx;
		padding: 0 20rpx;

	}

	.first {
		height: 120rpx;
		padding: 20rpx 0 0 20rpx;
		position: relative;
		display: flex;
		align-content: center;
		align-items: center;
	}

	.ms {
		padding-left: 20rpx;
	}

	.maoshu {
		color: #333333;;
		font-size: 12px;
	}

	.third {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8px;
	}

	.third .text {
		line-height: 30rpx;
		color: #999999;
		font-size: 12px;
		margin: 14rpx 0;
	}
	.third .text-right {
		font-size: 26rpx;
		line-height: 32rpx;
		color: #333333;
		font-weight: bolder;
	}

	.iconimg {
		width: 55rpx;
		height: 55rpx;
	}

	.dhk {
		position: absolute;
		font-size: 12px;
		color: white;
		padding: 4rpx 12rpx;
		background-color: #FF3347;
		top: 8rpx;
		right: 8rpx;
		border-radius: 25px;
	}

	.fourthBox {
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.fourth {
		width: 100%;
		background-color: rgba(255, 51, 71, 0.06);
		text-align: center;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		border-radius: 4px;
	}

	.fourthText {
		color: #FF3347;
		font-size: 12px;
		line-height: 60rpx;
		align-items: center;
		justify-content: center;
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis;
	}

	.fourthImage {
		width: 30rpx;
		height: 30rpx;
		align-items: center;
		justify-content: center;
		margin-right: 6rpx;
		flex-shrink: 0
	}
</style>
